<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
        /*搜索框样式调整*/
        .layui-form-item {
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
<div class="layuimini-container" style="height: 700px">
    <div class="layuimini-main">
            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">   <!--  每一个这样的div代表一个面板状态 每一个面板会自动换行 -->
                        <label class="layui-form-label">审批状态</label>
                        <div class="layui-input-inline">
                            <select id="search_status" class="layui-input">
                                <option value="">全部</option>
                                <option value="0">待处理</option>
                                <option value="1">同意</option>
                                <option value="2">不同意</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>

                </div>
            </fieldset>

            <div>
                    <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>

<!--            <script type="text/page" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit" id="updateStatusBtn">撤回</a>
            </script>-->

    </div>

</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

<!--初始化-->
<script>
    let user;
    $(function () {
        user = sessionStorage.getItem("user");   // 字符串
        user = JSON.parse(user);                  // 把一个json字符串转换成一个真正的json对象
    })
</script>
<script>
    $(function () {
        $("#iReset").click(function () {      // 重置
            //$("#search_staffName").val("");    // 设置value值
            $("#search_status").val("");
            search(user.staffName);
        });

        $("#searchVal").click(function () {   // 搜索
            //var search_staffName = $("#search_staffName").val();   // 获取value值
            var search_staffName = user.staffName;   // 获取value值
            console.log("staffname: "+search_staffName)
            var search_status = $("#search_status").val();   // 获取value值
            search(search_staffName,search_status);
        });

        search(user.staffName);
        function search(staffName,status) {   // js中默认不认形参的
            layui.use(['form','table','tree'], function(){
                var table = layui.table;
                var form = layui.form;
                var json = {};
                json.staffName = staffName;             // js中的动态属性添加
                if(status != null && status != "") {
                    json.status = status;
                }
                // table默认数据渲染和分页处理
                table.render({   // 渲染数据
                    elem: '#test'   // 获取table的id
                    ,url:'/leaveRequest/selectForPage'    // 获取json数据
                    ,where:json               // 添加的请求查询参数
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        ,layEvent: 'LAYTABLE_TIPS'
                        ,icon: 'layui-icon-tips'
                    }]
                    ,title: '用户数据表'
                    ,cols: [[
                        // 每行中的列字段渲染   cols会根据返回的总条数进行循环处理   相当于我们java中的for循环  每次会把一条完整的json数据传递进来
                        {type: 'checkbox', fixed: 'left'}
                        ,{field:'leaveRequestId', title:'编号',align:'center', width:80, fixed: 'left', unresize: true, sort: true, templet: function(res){
                                return '<em>'+ res.leaveRequestId +'</em>'
                            }}
                        ,{field:'applyTime', title:'发起时间',align:'center', width:160, templet: function(res){
                                return '<em>'+ res.applyTime +'</em>'
                            }}
                        ,{field:'staff.staffName', title:'请假人',align:'center', width:100, templet: function(res){
                                return '<em>'+ res.staff.staffName +'</em>'
                            }}
                        ,{field:'department.departmentName', title:'部门',align:'center', width:100, templet: function(res){
                                return '<em>'+ res.department.departmentName +'</em>'
                            }}
                        ,{field:'job.jobName', title:'职位',align:'center', width:110, templet: function(res){
                                return '<em>'+ res.job.jobName +'</em>'
                            }}
                        ,{field:'leaveType', title:'请假类型',align:'center', width:90, templet: function(res){
                                return '<em>'+ res.leaveType +'</em>'
                            }}
                        ,{field:'leaveTime', title:'开始时间',align:'center', width:160, templet: function(res){
                                return '<em>'+ res.leaveTime +'</em>'
                            }}
                        ,{field:'backTime', title:'结束时间',align:'center', width:160, templet: function(res){
                                return '<em>'+ res.backTime +'</em>'
                            }}
                        ,{field:'leaveDays', title:'请假天数',align:'center', width:90, templet: function(res){
                                return '<em>'+ res.leaveDays +'</em>'
                            }}
                        ,{field:'reason', title:'请假事由',align:'center', templet: function(res){
                                return '<em>'+ res.reason +'</em>'
                            }}
                        ,{field:'status', title:'流程状态',align:'center', width:100, templet: function(res){
                                if (res.status===0) {
                                    return '<em style="color: red">待处理</em>'
                                }else if (res.status === 1) {
                                    return '<em style="color: #009f95">同意</em>'
                                }else{
                                    return '<em style="color: black">不同意</em>'
                                }
                            }}
                        //,{field:'action', title:'账号状态', width:120, templet: '#switchTpl', unresize: true}
                        ,{field: 'right', title:'流程处理',align:'center', width:120, templet : function(res) {
                            if (res.status === 0) {
                                return '<button class="layui-btn layui-btn-xs" lay-event="edit">' + '撤回' + '</button>'
                            }else {
                                //return '<button disabled class="layui-btn-disabled layui-btn-xs">' + '撤回' + '<button>'
                                return '<em>' + '已处理' + '<em>'
                            }

                        }}
                    ]]
                    ,height:'516px'
                    ,page: true
                });
                //头工具栏事件
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    console.log(checkStatus);
                    switch(obj.event){
                        case 'insert_staff':
                            window.location.href = 'staff.html';
                            break;
                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });
                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    //console.log(obj)
                    if(obj.event === 'del'){
                        layer.confirm('删除后无法恢复，请再次确认！', function(index){
                            obj.del();
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit'){
                        ///const obj1 = JSON.stringify(obj.data);
                        console.log("请假id"+obj.data.leaveRequestId);
                        //sessionStorage.setItem("rowData",obj1);
                        //obj.update(fields) //修改当前行数据
                        //配置一个透明的询问框
                        //询问框
                        layer.msg('确认撤回？', {
                            time: 200000, //20s后自动关闭
                            btn: ['确认','取消'],
                            btn1:function(){
                                $.ajax({   // 异步请求   想象成线程状态
                                    url:"/leaveRequest/deleteById",   // 请求路径
                                    type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                    datatype:"text",
                                    // request中传递的key-value值
                                    data:{leaveRequestId:obj.data.leaveRequestId},
                                    success:function(){                        // 后台服务响应成功，自动返回数据
                                        search(user.staffName);
                                        layer.msg('撤回成功！', {icon: 1});
                                    },
                                    error:function(){             // 网络请求失败，自动调用此方法
                                        layer.msg("网络服务失败，请稍后重试!");
                                    }
                                });
                            },
                            btn2:function(){
                                layer.close();
                            }
                        })
                    }
                });
                //监听开关控制器状态操作
                form.on('switch(actionDemo)', function(obj){
                    console.log(obj.elem.checked);
                    console.log(this.value);
                    var action = obj.elem.checked ? '1':'0';
                    var staffId = this.value;
                    $.ajax({   // 异步请求   想象成线程状态
                        url:"/staff/updateById",   // 请求路径
                        type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                        contentType:"application/json;charset=utf-8",
                        datatype:"text",
                        // request中传递的key-value值
                        data:JSON.stringify({
                            action:action,
                            staffId:staffId
                        }),
                        success:function(response){                        // 后台服务响应成功，自动返回数据
                            layer.msg(response.msg);
                        },
                        error:function(response){             // 网络请求失败，自动调用此方法
                            layer.msg("网络服务失败，请稍后重试!");
                        }
                    });
                });
            });
        }
    });


    //JS
    layui.use(['element', 'layer', 'util','tree'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,title: '更多'
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                    ,scrollbar: false
                });
            }
        });
    });

</script>

</body>
</html>
